<template>
  <!--我的音乐子导航-->
  <div class="mynav">
    <ul>
      <li
        v-for="(val,index) in pathUrl"
        :key="index"
        @click="skip(val.name)"
        :class="pathName==val.name?'activeColor':''"
      >{{val.text}}</li>
    </ul>
  </div>
</template>

<script>
export default {
  name: "mynav",
  data() {
    return {
      pathUrl: [
        { text: "我的喜欢的音乐", name: "love" },
        { text: "关注的歌手", name: "playlist" },
        { text: "关注的用户", name: "attention" },
        { text: "粉丝", name: "fans" },
        { text: "我的动态", name: "dynamic"}
      ],
      pathName: ""
    };
  },
  watch: {
    $route: "newpage"
  },
  methods: {
    skip(path) {
      //console.log(this.$route)
      if (this.$route.matched[1].name !== path) {
        this.$router.push({ name: path });
        this.pathName = this.$route.matched[1].name;
      }
    },
    newpage() {
      //if(this.$route.name=='Mymusic'){
        this.pathName = this.$route.matched[1].name;
        //console.log(this.$route)
      //}
      
    }
  },
  mounted(){
      this.pathName = this.$route.matched[1].name;
  }
};
</script>

<style scoped lang='less'>
.mynav {
  width: 700px;
  ul {
    display: flex;
    li {
      margin: 0 15px;
      text-align: center;
      cursor: pointer;
    }
    li:hover {
      color: #31c27c;
    }
  }
}
.activeColor {
  color: #31c27c;
}
</style>